<template>
  <div class="app-container">
    <!-- 顶部导航栏 -->
    <el-header class="app-header">
      <div class="header-left">
        <h1 class="system-title">{{ systemTitle }}</h1>
      </div>
      <div class="header-right">
        <el-dropdown v-if="authStore.isAuthenticated">
          <span class="user-info">
            <el-avatar :size="30" :src="authStore.currentUser?.avatar || ''" />
            <span class="username">{{ authStore.currentUser?.username }}</span>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
        <el-button v-else type="primary" @click="goToLogin">登录</el-button>
      </div>
    </el-header>

    <!-- 主内容区 -->
    <div class="main-content">
      <!-- 侧边栏 -->
      <el-aside class="app-sidebar" v-if="authStore.isAuthenticated">
        <el-menu
            :default-active="activeMenu"
            router
            class="sidebar-menu"
            background-color="#304156"
            text-color="#bfcbd9"
            active-text-color="#409eff"
        >
          <template v-for="item in filteredSidebarItems" :key="item.path">
            <el-sub-menu
                v-if="item.children"
                :index="item.path"
            >
              <template #title>
                <el-icon>
                  <component :is="item.icon" />
                </el-icon>
                <span>{{ item.name }}</span>
              </template>
              <el-menu-item
                  v-for="child in item.children"
                  :key="child.path"
                  :index="child.path"
              >
                <el-icon>
                  <component :is="child.icon" />
                </el-icon>
                <span>{{ child.name }}</span>
              </el-menu-item>
            </el-sub-menu>

            <el-menu-item v-else :index="item.path">
              <el-icon>
                <component :is="item.icon" />
              </el-icon>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </template>
        </el-menu>
      </el-aside>

      <!-- 页面内容 -->
      <el-main class="app-main">
        <router-view v-slot="{ Component }">
          <transition name="fade" mode="out-in">
            <component :is="Component" />
          </transition>
        </router-view>
      </el-main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { sidebarItems, systemTitle } from '@/sidebar'
import { useAuthStore } from '@/store/modules/auth.store'

const route = useRoute()
const router = useRouter()
const authStore = useAuthStore()

// 当前激活菜单
const activeMenu = ref('/')
watch(
    () => route.path,
    (newPath) => {
      activeMenu.value = newPath
    },
    { immediate: true }
)

// 根据用户角色过滤侧边栏项目
const filteredSidebarItems = computed(() => {
  return sidebarItems.filter(item => {
    // 普通用户只能看到首页和关于
    if (authStore.currentUser?.role === 'respondent') {
      return item.path === '/' || item.path === '/about'
    }
    // 创建者可以看到所有菜单项
    return true
  })
})

// 退出登录
const logout = () => {
  authStore.logout()
  router.push({ name: 'home' })
}

// 跳转到登录页
const goToLogin = () => {
  router.push({ name: 'auth' })
}
</script>

<style scoped>
.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #304156;
  color: white;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  z-index: 10;
}

.system-title {
  font-size: 20px;
  margin: 0;
  color: white;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  cursor: pointer;
  color: white;
}

.username {
  margin-left: 10px;
}

.main-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.app-sidebar {
  width: 220px !important;
  background-color: #304156;
  transition: width 0.3s;
}

.sidebar-menu {
  border-right: none;
  height: 100%;
}

.app-main {
  flex: 1;
  padding: 20px;
  background-color: #f0f2f5;
  overflow-y: auto;
}

/* 过渡动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>